<template>
  <div class="monitor-page" style="padding: 20px">
    <!-- 顶部统计 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="6" v-for="(val, key) in stats.energySaved" :key="key">
        <el-card>
          <div>用能削减：{{ key }}</div>
          <h2 style="color: #409eff">-{{ val }} {{ key === '电' ? 'kWh' : 'm³' }}</h2>
        </el-card>
      </el-col>

    </el-row>

    <!-- 筛选条件 -->
    <el-row :gutter="20" style="margin-bottom: 10px;">
      <el-col :span="4">
        <el-select v-model="filterStatus" placeholder="执行状态" clearable style="width: 100%">
          <el-option label="成功" value="成功" />
          <el-option label="失败" value="失败" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="filterDevice" placeholder="设备类型" clearable style="width: 100%">
          <el-option v-for="item in deviceList" :key="item" :label="item" :value="item" />
        </el-select>
      </el-col>
    </el-row>

    <!-- 执行记录表格 -->
    <el-table :data="filteredLogs" border stripe>
      <el-table-column prop="id" label="策略编号" width="120" />
      <el-table-column prop="device" label="设备" width="120" />
      <el-table-column prop="time" label="执行时间" width="180" />
      <el-table-column prop="status" label="执行状态" width="100">
        <template #default="{ row }">
          <el-tag :type="statusType(row.status)">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="energy" label="能源" width="80" />
      <el-table-column prop="impact" label="能耗影响" width="100" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button v-if="row.status === '失败'" size="small" @click="viewDetail(row)">查看原因</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 失败详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="执行失败详情" width="500px">
      <div style="white-space: pre-line; font-size: 14px;">{{ currentLog.detail }}</div>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const stats = ref({
  today: 18,
  successRate: 88.9,
  failRate: 11.1,
  energySaved: {
    电: 100,
    水: 30,
    气: 60
  }
})


const titles = {
  today: '今日执行策略',
  successRate: '成功率',
  failRate: '失败率',
  energySaved: '用能削减'
}
const colors = {
  today: '#303133',
  successRate: '#67c23a',
  failRate: '#f56c6c',
  energySaved: '#409eff'
}

const deviceList = ['空调', '照明', '电梯', '锅炉']
const filterDate = ref([])
const filterStatus = ref('')
const filterDevice = ref('')

const logList = ref([
  { id: "ST100", device: "洗手间", energy: "水", time: "2024-05-01 13:03", status: "成功", impact: "-5.7m³", detail: "" },
  { id: "ST101", device: "热水器", energy: "气", time: "2024-05-01 17:33", status: "成功", impact: "-3.6m³", detail: "" },
  { id: "ST102", device: "照明", energy: "电", time: "2024-05-01 09:23", status: "失败", impact: 0, detail: "设备响应超时" },
  { id: "ST103", device: "照明", energy: "电", time: "2024-05-01 11:04", status: "失败", impact: 0, detail: "设备响应超时" },
  { id: "ST104", device: "电梯", energy: "电", time: "2024-05-01 09:46", status: "失败", impact: 0, detail: "设备响应超时" },
  { id: "ST105", device: "洗手间", energy: "水", time: "2024-05-01 13:55", status: "成功", impact: "-1.8m³", detail: "" },
  { id: "ST106", device: "锅炉", energy: "气", time: "2024-05-01 09:38", status: "成功", impact: "-2.5m³", detail: "" },
  { id: "ST107", device: "锅炉", energy: "气", time: "2024-05-01 17:05", status: "成功", impact: "-9m³", detail: "" },
  { id: "ST108", device: "燃气灶", energy: "气", time: "2024-05-01 08:20", status: "失败", impact: 0, detail: "设备响应超时" },
  { id: "ST109", device: "新风", energy: "电", time: "2024-05-01 17:54", status: "失败", impact: 0, detail: "设备响应超时" },
  { id: "ST110", device: "热水器", energy: "气", time: "2024-05-01 16:33", status: "成功", impact: "-7m³", detail: "" },
  { id: "ST111", device: "洗手间", energy: "水", time: "2024-05-01 15:06", status: "成功", impact: "-6m³", detail: "" },
  { id: "ST112", device: "新风", energy: "电", time: "2024-05-01 12:07", status: "失败", impact: 0, detail: "设备响应超时" },
  { id: "ST113", device: "燃气灶", energy: "气", time: "2024-05-01 10:52", status: "成功", impact: "-3.93kWh", detail: "" },
  { id: "ST114", device: "电梯", energy: "电", time: "2024-05-01 14:55", status: "成功", impact: "-3.08kWh", detail: "" }
])


const dialogVisible = ref(false)
const currentLog = ref({})

function viewDetail(row) {
  currentLog.value = row
  dialogVisible.value = true
}

function statusType(s) {
  return s === '成功' ? 'success' : s === '失败' ? 'danger' : 'info'
}

const filteredLogs = computed(() => {
  return logList.value.filter(log => {
    const dateMatch =
      !filterDate.value.length ||
      (log.time >= filterDate.value[0] && log.time <= filterDate.value[1])
    const statusMatch = !filterStatus.value || log.status === filterStatus.value
    const deviceMatch = !filterDevice.value || log.device === filterDevice.value
    return dateMatch && statusMatch && deviceMatch
  })
})
</script>

<style scoped>
.monitor-page {
  max-width: 1200px;
  margin: auto;
}
</style>
